<template>
  <el-config-provider :locale="elementLocale">
    <div id="app" :class="{ dark: isDark }">
      <div class="header-controls">
        <el-space>
          <!-- 卡片大小切换 -->
          <el-radio-group v-model="cardSize" size="small">
            <el-radio-button label="small">{{ t('pokedex.size.small') }}</el-radio-button>
            <el-radio-button label="medium">{{ t('pokedex.size.medium') }}</el-radio-button>
            <el-radio-button label="large">{{ t('pokedex.size.large') }}</el-radio-button>
          </el-radio-group>

          <!-- 主题切换 -->
          <el-switch
            v-model="isDark"
            :active-icon="Moon"
            :inactive-icon="Sunny"
            inline-prompt
            size="small"
          />

          <!-- 语言切换 -->
          <el-select
            v-model="currentLocale"
            size="small"
            style="width: 100px"
          >
            <el-option value="cn" label="中文" />
            <el-option value="en" label="English" />
          </el-select>

          <!-- 用户头像 -->
          <el-button
            class="team-avatar"
            circle
            @click="goToTeam"
          >
            <el-icon><User /></el-icon>
          </el-button>
        </el-space>
      </div>
      <router-view />
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { useDark } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { computed, ref, provide, onMounted, watch } from 'vue'
import { Moon, Sunny, User } from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const router = useRouter()
const isDark = useDark()
const { locale, t } = useI18n()

// 从 localStorage 获取保存的设置
const getSavedSettings = () => {
  return {
    cardSize: localStorage.getItem('pokemon-card-size') || 'medium',
    language: localStorage.getItem('pokemon-language') || 'cn',
    theme: localStorage.getItem('pokemon-theme') === 'dark'
  }
}

// 保存设置到 localStorage
const saveSettings = () => {
  localStorage.setItem('pokemon-card-size', cardSize.value)
  localStorage.setItem('pokemon-language', currentLocale.value)
  localStorage.setItem('pokemon-theme', isDark.value ? 'dark' : 'light')
}

// 初始化设置
const savedSettings = getSavedSettings()
const cardSize = ref(savedSettings.cardSize)
locale.value = savedSettings.language
isDark.value = savedSettings.theme

// 提供给子组件
provide('cardSize', cardSize)

const currentLocale = computed({
  get: () => locale.value,
  set: (value) => locale.value = value
})

// Element Plus 本地化配置
const elementLocale = computed(() => 
  currentLocale.value === 'cn' ? zhCn : en
)

// 添加跳转函数
const goToTeam = () => {
  router.push('/team')
}

// 监听设置变化并保存
watch([cardSize, currentLocale, isDark], () => {
  saveSettings()
}, { deep: true })

// 初始加载时应用保存的设置
onMounted(() => {
  const savedSettings = getSavedSettings()
  cardSize.value = savedSettings.cardSize
  locale.value = savedSettings.language
  isDark.value = savedSettings.theme
})
</script>

<style>
#app {
  width: 100%;
  min-height: 100vh;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  transition: background-color 0.3s;
}

.header-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

/* 移除原有的头像样式，使用 el-button 的样式 */
</style> 